import React, { Component } from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { autorun } from 'mobx';
import { tabbarStore } from '../../mobx/store';

import style from './css/index.module.css';

export default class Films extends Component {
  state = {
    showBar: true,
  };

  componentDidMount() {
    autorun(() => {
      this.setState({
        showBar: tabbarStore.tabbarShow,
      });
    });
  }

  render() {
    return (
      <>
        {this.state.showBar && (
          <>
            <div className={style.swiper}>Film 轮播</div>
            <ul className={style.navbar}>
              <li>
                <NavLink to="/film/nowPlaying">正在热映</NavLink>
              </li>
              <li>
                <NavLink to="/film/comingSoon">即将上映</NavLink>
              </li>
            </ul>
          </>
        )}
        <Outlet />
      </>
    );
  }
}
